<template>
  <div class="call_ev">
    <affix :label ="$t('configLazyLoad.interfaceConfig.callEventList')"></affix>
    <div class="wrap">
      <div class="table_top">
        <span class="iconfont icon-zhankai"
              @click = "edit('')"><span>{{$t('public.add')}}</span></span>
      </div>
      <el-table :data="tableData"
              border
              size="mini"
              style="width: 100%">
      <el-table-column :label ="$t('agentSetting.agentSetting43')"
                       prop = "Name"></el-table-column>
      <el-table-column :label ="$t('configLazyLoad.interfaceConfig.eventType')"
                       prop = "evType"></el-table-column>
      <el-table-column :label ="$t('configLazyLoad.interfaceConfig.url')"
                       prop = "Url"></el-table-column>
      <el-table-column label = "PBX"
                       prop = "PBX"></el-table-column>
      <el-table-column :label="$t('public.operate')">
        <template scope="scope">
          <el-button class="edit"
                     type = "text"
                     size="small"
                     @click = "edit(scope.row._id)">{{$t('public.edit')}}</el-button>
          <el-button class = "del"
                     type = "text"
                     size="small"
                     @click = "openTip(scope.row)">{{$t('public.delete')}}</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
  <el-dialog :close-on-click-modal="false" modal-append-to-body
             lock-scroll
             top = "10%"
             :title = "dealNow"
             :visible.sync = "dealDialog"
             width = "50%">
    <el-form label-position = "top"
             :rules="rules"
             :model="form"
             ref="form"
             label-width = "80px">
      <el-form-item :label ="$t('configLazyLoad.interfaceConfig.url')"
                    prop = "Url">
        <el-input v-model.trim = "form.Url"></el-input>
      </el-form-item>
      <el-row :gutter = "20">
        <el-col :span="12">
          <el-form-item label = "PBX"
                        prop = "PBX">
            <el-select :disabled="isDisabled"
                       v-model="form.PBX"
                       size="mini"
                       :placeholder="$t('public.pleasePick')">
              <el-option
                v-for="item in accountPbxes"
                :label="item.NickName"
                :value = "item.PBX">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label ="$t('configLazyLoad.interfaceConfig.eventType')"
                        prop = "ConcreteType">
            <el-select v-model="form.ConcreteType" :placeholder="$t('public.pleasePick')">
              <el-option
                v-for="item in callEventConcreteType"
                :label="item.code_name"
                :value="item.code_value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item :label ="$t('agentSetting.agentSetting43')"
                    prop = "Name">
        <el-input v-model.trim = "form.Name"></el-input>
      </el-form-item>
      <el-form-item class = "wrap_btn">
        <el-button class = "primary_btn"
                   @click = "cancel">{{$t('public.cancel')}}</el-button>
        <el-button type = "primary"
                   class = "primary_btn"
                   @click = "save('form')">{{$t('public.save')}}</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
  </div>
</template>
<script>
  import {deepClone} from '@/utils/m7Utils.js'
  import affix from '@/components/ui-modules/affix/Affix.vue'
  export default {
    name: 'interfaceConfig',
    data () {
      return {
        tableData: [],
        dealDialog: false,
        dealNow: '',
        isDisabled: true,
        form: {
          Name: '',
          PBX: '',
          Url: '',
          ConcreteType: '',
          _id: ''
        },
        rules: {
          Name: [
            { required: true, message: this.$t('validate.required'), trigger: 'blur' }
          ],
          PBX: [
            { required: true, message: this.$t('configLazyLoad.interfaceConfig.choosePBX'), trigger: 'change' }
          ],
          Url: [
            { required: true, message: this.$t('validate.required'), trigger: 'blur' }
          ],
          ConcreteType: [
            { required: true, message: this.$t('configLazyLoad.interfaceConfig.chooseCallEvent'), trigger: 'change' }
          ]
        },
        accountPbxes: [],
        callEventConcreteType: []
      }
    },
    computed: {
    },
    components: {
      affix
    },
    methods: {
      edit (id) {
        if (!id) {
          this.isDisabled = false
          this.dealNow = this.$t('configLazyLoad.interfaceConfig.addCallEvent')
          if (this.$refs['form']) {
            this.$refs['form'].resetFields()
          }
          // for (let item in this.form) {
          //   this.form[item] = ''
          // }
        } else {
          if (this.$refs['form']) {
            this.$refs['form'].resetFields()
          }
          this.dealNow = this.$t('configLazyLoad.interfaceConfig.editCallEvent')
          this.isDisabled = true
          this.$store.dispatch('getCallEventById', id).then(res => {
            if (res.success) {
              let obj = res.doc
              for (let item in this.form) {
                this.form[item] = obj[item]
              }
            }
          })
        }
        this.dealDialog = true
      },
      openTip (obj) {
        let text = this.$t('configLazyLoad.interfaceConfig.confirmDeleteEvent',{name: obj.Name})
        this.$confirm(text, this.$t('public.tip'), {
          confirmButtonText: this.$t('public.confirm'),
          cancelButtonText: this.$t('public.cancel'),
          type: 'warning',
          cancelButtonClass: 'primary_btn',
          confirmButtonClass: 'primary_btn'
        })
        .then(() => {
          this.$store.dispatch('delCallEvent', obj._id).then(res => {
            if (res.success) {
              this.$message.success(this.$t('configLazyLoad.interfaceConfig.deleteEventSucc'))
              this.intiTable()
            }
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: this.$t('config.agent.cancelDel')
          })
        })
      },
      save (formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.$store.dispatch('addOrUpdateCallEvent', this.form).then(res => {
              if (res.success) {
                if (this.form._id) {
                  this.$message.success(this.$t('configLazyLoad.interfaceConfig.saveEventSucc'))
                } else {
                  this.$message.success(this.$t('configLazyLoad.interfaceConfig.addEventSucc'))
                }
              }
              this.intiTable()
            })
            this.cancel()
          } else {
            console.log('error submit!!')
            return false
          }
        })
      },
      cancel () {
        this.dealDialog = false
      },
      // 处理通话事件
      dealConcreteType (obj) {
        for (var i = 0; i < obj.length; i++) {
          for (let j = 0; j < this.callEventConcreteType.length; j++) {
            if (obj[i].ConcreteType === this.callEventConcreteType[j].code_value) {
              obj[i].evType = this.callEventConcreteType[j].code_name
            }
          }
        }
        return obj
      },
      dealPbx (obj) {
        let arr = []
        obj.map(item => {
          arr.push({
            NickName: item.NickName,
            PBX: item.PBX
          })
        })
        return arr
      },
      // 初始化通话事件列表
      intiTable () {
        let data = {
          idle: ''
        }
        this.$store.dispatch('queryCallEvent', data).then(res => {
          this.tableData = this.dealConcreteType(deepClone(res.list))
        })
      }
    },
    beforeMount () {
      this.accountPbxes = this.dealPbx(deepClone(this.$store.state.session.account.pbx))
      this.callEventConcreteType = deepClone(this.$getCache('callEventConcreteType'))
      this.intiTable()
    }
  }
</script>
<style lang="stylus" scoped>
  @import "../../../../../assets/common.styl"
  .call_ev
    padding: 20px 16px
    .dele_text
      text-align center
    .wrap_btn
      margin-top 20px
      text-align center
    .ui-affix
      padding-bottom 4px
    .el-row
      .el-col
        .el-select
          width 100%
    .wrap
      margin-left 20px
      .del
        color $c-pink
      .table_top
        height 30px
        line-height 30px
        border 1px solid #ccc
        border-bottom none
        .iconfont
          margin-left 12px
          cursor pointer
          color $c-main
          font-size 12px
          span
            color $cf-gray2
            margin-left 6px
</style>
